<template>
  <el-card class="box-card" v-loading="isPublishing">
    <div slot="header" class="clearfix">
      <span>写文章</span>
      <el-button style="float: right; padding: 3px 0" type="text" @click="publishBlog">发布</el-button>
    </div>
    <!-- 编辑区域-->
    <el-row :gutter="10" >
     <el-col :span="6" style="text-align: center">
       <el-upload
           class="avatar-uploader"
           :action="defaultConfig.baseApiUrl+'/uploadImg'"
           name="blogIllustrations"
           :show-file-list="false"
           :on-success="successSend"
           >
         <img v-if="cover" :src="cover" class="avatar"/>
         <i v-else class="el-icon-plus avatar-uploader-icon"></i>
       </el-upload>
       <h3>文章封面</h3>
     </el-col>
      <el-col :span="18">
        <el-row :gutter="10" style="margin-bottom: 20px;">
         <el-col :span="20">
             <el-input v-model="title" placeholder="请输入文章的标题"></el-input>
         </el-col>
        </el-row>
        <el-row :gutter="10" style="margin-bottom: 20px;">
          <el-col :span="20">
              <el-input v-model="description" placeholder="请输入文章的主题"></el-input>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="20">
            <el-tag
                :key="tag"
                v-for="tag in tags"
                closable
                :disable-transitions="false"
                @close="handleClose(tag)">
              {{tag}}
            </el-tag>
            <el-input
                class="input-new-tag"
                v-if="inputVisible"
                v-model="inputValue"
                ref="saveTagInput"
                size="small"
                @keyup.enter.native="handleInputConfirm"
                @blur="handleInputConfirm"
            >
            </el-input>
            <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :span="24">
        <div id="editor" ref="editor"></div>
      </el-col>
    </el-row>

  </el-card>
</template>

<script>
import defaultConfig from '@/config/config.default';
import Editor from 'wangeditor'
import hljs from "highlight.js"
import ImgFileService from '@/service/ImgFileService'
import BlogService from '@/service/blogService'
export default {
  name: "Global-Editor",
  data(){
    return{
      defaultConfig,
      title: '',
      description: '',
      tags: [],
      cover: '',
      inputVisible: false,
      inputValue: '',
      editor: null,
      isPublishing: false
    }
  },
  mounted() {
    this.editor=new Editor(this.$refs['editor'])
    this.editor.highlight=hljs

    this.editor.config.height = 800;
    this.editor.config.zIndex = 1000;
    this.editor.config.placeholder = '请输入文章内容'
    this.editor.config.focus = true;
    this.editor.config.customUploadImg = function (resultFiles, insertImgFn) {
      // resultFiles 相当于是input type=file 所选中的目标
      // insertImgFn 回调函数, 获取图片的最终地址, 插入到编辑器里面
      let imgData = new FormData();
      for (let i = 0, len = resultFiles.length; i < len; i++) {
        imgData.append('blogIllustrations', resultFiles[i]);
      }
      ImgFileService.uploadImgFile(imgData).then(rs => {
        for (let i = 0, len = rs.data.data.imgList.length; i < len; i++) {
          insertImgFn(rs.data.data.imgList[i])
        }
      })
    }
    this.editor.create()
  },
  beforeDestroy() {
    this.editor.destroy()
  },
  methods:{
    successSend(rs){
      this.cover=rs.data.imgList[0]
    },
    handleClose(tag) {
      this.tags.splice(this.tags.indexOf(tag), 1);
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick(() => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.tags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = '';
    },
    publishBlog(){
      let blogData  = {
        title: this.title,
        description: this.description,
        tags: this.tags,
        cover: this.cover,
        content: this.editor.txt.html()
      }
      if (this.title&&this.description&&this.tags.length&&this.cover&&blogData.content){
        this.isPublishing = true;
        BlogService.createBlog(blogData).then(rs => {
          if (rs.data.status === 200) {
            this.$message.success('发布成功');
            this.$emit('publishSuccess');
          }else {
            this.$message.error('发布失败');
          }
        }).finally(()=>{
          this.isPublishing = false;
        })
      }else {
        this.$message.warning('博客数据不全, 请完善后再发表');
      }
    }
  },

}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>